<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en" class="page-fill">
<head>
    <meta charset="UTF-8">
    <title>忘记密码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="userForget">
    <meta name="description" content="用户忘记密码">
    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/oksub.css"/>
    <style>
        .forget .tit {
            padding-top: 15px;
            text-align: center;
            font-size: 18px;
        }

        .forget .code-box {
            display: flex;
        }

        .forget .code-box .btn-auth-code {
            margin-left: 10px;
        }

        .reset-password-form {
            display: none;
        }
    </style>
</head>
<body class="page-fill">
    <div class="page-fill forget" id="login">
        <form class="layui-form verify-user-form">
            <div class="layui-form-item tit">忘记密码</div>
            <div class="layui-form-item input-item">
                <label for="phone">输入手机号码</label>
                <input type="text" class="layui-input" id="phone" name="text" placeholder="请输入手机号码" autocomplete="off" lay-verify="required|phone" maxlength="11">
            </div>
            <div class="layui-form-item input-item code-box">
                <label for="captcha">验证码</label>
                <input type="text" class="layui-input" id="captcha" name="captcha" placeholder="请输入验证码" autocomplete="off" lay-verify="required" maxlength="8">
                <button type="button" class="layui-btn btn-auth-code">获取验证码</button>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-block" lay-filter="verifyUser" lay-submit="">提 交</button>
            </div>
            <div class="login-link">
                <a href="userLogin.jsp">再去登录试试</a>
            </div>
        </form>

        <form class="layui-form reset-password-form">
            <div class="layui-form-item tit">设置密码</div>
            <div class="layui-form-item input-item">
                <label for="password">新密码</label>
                <input type="password" class="layui-input" id="password" name="password" placeholder="请输入密码" autocomplete="off" lay-verify="required|password">
            </div>
            <div class="layui-form-item input-item">
                <label for="comPassword">确认密码</label>
                <input type="password" class="layui-input" id="comPassword" name="password" placeholder="请确认密码" autocomplete="off" lay-verify="required|comPassword">
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-block" lay-filter="resetPassword" lay-submit="">确定设置</button>
            </div>
        </form>
    </div>
    <!--js逻辑-->
    <script src="../lib/layui/layui.js"></script>
    <script>
        layui.use(["form", "okLayer", "okUtils", "okSweetAlert2"], function () {
            let $ = layui.jquery;
            let form = layui.form;
            let okLayer = layui.okLayer;
            let okUtils = layui.okUtils;
            let okSweetAlert2 = layui.okSweetAlert2;
            
            let phoneRegex = /^[1][0-9]{10}$/;
            let timer = "";
            let intervalTime = 60;
            
            var phone;

            /**
             * 数据校验
             */
            form.verify({
                phone: [phoneRegex, "手机号格式不正确"],
                password: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
                comPassword: function (val) {
                    let password = $("#password").val();
                    return password == val ? "" : "两次密码不一致";
                }
            });
            
            /**
             * 验证码输入框失去焦点时判定
             */ 
  			 $("#captcha").blur(function(){
    			if(phonemsg!=$(this).val()){
    				okSweetAlert2.fire({
    			    	type: "error",
    			    	title: "啊哦",
    			    	text: "验证码错误",
    			    	footer: "请重新输入"
	    			    });
    				$(this).val("");
    			}
  			 });

            /**
             * 提交表单
             */
            form.on("submit(verifyUser)", function (data) {
                okUtils.ajax("/verifyUser", "post", data.field, true).done(function (response) {
                    okLayer.greenTickMsg(response.msg, function () {
                        // 样式修改
                        $('.btn-auth-code').removeClass("layui-btn-disabled");
                        $('.btn-auth-code').text("重新获取");
                        // 重置定时器
                        clearInterval(timer);
                        timer = "";
                        intervalTime = 60;
                        // 显示重置密码表单
                        $(".verify-user-form, .reset-password-form").toggle();
                        phone = $("#phone").val();
                    });
                }).fail(function (error) {
                    console.log(error)
                });
                return false;
            });

            /**
             * 获取验证码
             */
            $('.btn-auth-code').click(function () {
                let _this = $(this);
                if (_this.hasClass("layui-btn-disabled")) {
                    return;
                }
                let phone = $("#phone").val();
                if (phoneRegex.test(phone)) {
                    _this.addClass("layui-btn-disabled");
                    _this.text(intervalTime + "秒后获取");
                    // 按钮操作定时器
                    timer = setInterval(function () {
                        intervalTime--;
                        if (intervalTime < 1) {
                            clearInterval(timer);
                            _this.removeClass("layui-btn-disabled");
                            _this.text("重新获取");
                            intervalTime = 60;
                        } else {
                            _this.text(intervalTime + "秒后获取");
                        }
                    }, 1000);

                 // 异步请求验证手机验证码
                	$.ajax({
           	    		 async:true,
           	    		 type:"post",
           	    		 url:"${pageContext.request.contextPath}/user",
           	    		 data:{
           	    			 op:"checkCode",
           	    			 phone:phone
           	    		 },
           	    		 success:function(result){
           	    			 getCode(result);
           	    		 },
           	    		 error:function(){
           	    			 alert("异步请求失败!");
           	    		 }
                	});
                } else {
                    layer.msg("手机号码格式不正确", {icon: "5", anim: "6"});
                    $("#phone").focus();
                }
            });

            /**
             * 重置密码
             */
            form.on("submit(resetPassword)", function (data) {
            	var password = $("#password");
            	console.log("phone:"+phone+" password:"+password);
            	// 异步请求重置密码
            	$.ajax({
       	    		 async:true,
       	    		 type:"post",
       	    		 url:"${pageContext.request.contextPath}/user",
       	    		 data:{
       	    			 op:"uppdateUserByPhone",
       	    			 phone:phone,
       	    			 password:password
       	    		 },
       	    		 success:function(result){
       	    			 console.log(result);
       	    			 if(result){
       	    				 // 修改成功
       	    				 okSweetAlert2.fire({
					            type: "info",
					            title: "通知",
					            text: "密码修改成功",
					            footer: "请重新登录"
						    });
       	    				window.location = "userLogin.jsp";
       	    			 }else{
       	    				 // 修改失败
       	    				okSweetAlert2.fire({
					            type: "error",
					            title: "啊哦",
					            text: "密码修改失败",
					            footer: "请重试"
						    });
       	    				 
       	    			 }
       	    		 },
       	    		 error:function(){
       	    			 alert("异步请求失败!");
       	    		 }
            	});
                return false;
            });

            /**
             * 表单input组件单击时
             */
            $("#login .input-item .layui-input").click(function (e) {
                e.stopPropagation();
                $(this).addClass("layui-input-focus").find(".layui-input").focus();
            });

            /**
             * 表单input组件获取焦点时
             */
            $("#login .layui-form-item .layui-input").focus(function () {
                $(this).parent().addClass("layui-input-focus");
            });

            /**
             * 表单input组件失去焦点时
             */
            $("#login .layui-form-item .layui-input").blur(function () {
                $(this).parent().removeClass("layui-input-focus");
                if ($(this).val() != "") {
                    $(this).parent().addClass("layui-input-active");
                } else {
                    $(this).parent().removeClass("layui-input-active");
                }
            });
        });
        
        var phonemsg = 0;
        function getCode(result){
        	phonemsg = result;
        }
    </script>
</body>
</html>
